<template>
  <div id="department" class="manage-pos">
    <tag-box v-show="showChild">
      <template v-slot:department>
        <div class="opentype-tag choose-bg-tag">部门信息</div>
      </template>
    </tag-box>
    <div class="dep_top" v-show="!showChild">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="部门名称">
                <a-input
                  v-model="queryParam.depname"
                  placeholder="请输入"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" class="ml8" v-action:query @click="$refs.table.refresh(true)">查询</a-button>
                <a-button class="ml8" @click="handleReset">重置</a-button>
                <a-button type="danger" class="ml8" v-action:add @click="openAddComp">新增</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
    <div class="dep_main" v-show="!showChild">
      <s-table
        ref="table"
        size="default"
        :row-key="(r,i) => i.toString()"
        :columns="columns"
        :data="loadData">
        <span slot="action" slot-scope="t, r">
          <a
            v-action:edit
            href="javascript:void(0);"
            @click="editDep(r)">编辑</a>
          <a-divider type="vertical" />
          <a
            v-action:delete
            href="javascript:void(0);"
            @click="() => del(r.id)">删除</a>
        </span>
      </s-table>
    </div>
    <transition name="slide-fade">
      <div class="popContainer" v-if="showChild">
        <edit-department
          :open-type="openType"
          :show-child.sync="showChild"
          :form-data="formData"
          @addDep="addDep"
          @changeNew="changeNew"
        ></edit-department>
      </div>
    </transition>
  </div>
</template>
<script>
import EditDepartment from './EditDepartment' // 查询组件
import { TagBox } from '@/myComponents'
import { STable } from '@/components'
import {
  departmentList,
  addDepartment,
  changeDep,
  deleteDep,
  departmentTree
} from '@/api/leave'

export default {
  name: 'DepartManage',
  components: { EditDepartment, TagBox, STable },
  data () {
    return {
      openType: 0,
      showChild: false,
      formData: {}, // 单条数据详情
      columns: [
        {
          title: '序号',
          width: 50,
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: (t, r, index) => {
            return ((this.paginationInfo.pageNum - 1) * this.paginationInfo.pageSize + index + 1)
          }
        },
        {
          title: '部门名称',
          width: 90,
          align: 'center',
          dataIndex: 'depname'
        },
        {
          title: '上级部门',
          width: 90,
          align: 'center',
          dataIndex: 'superior_dep_name',
          customRender: function (t, r, index) {
            return t || '无'
          }
        },
        {
          title: '操作',
          width: 90,
          dataIndex: '',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      queryParam: {},
      paginationInfo: null,
      loadData: parameter => {
        this.paginationInfo = parameter
        return departmentList(Object.assign(parameter, this.queryParam))
          .then(res => {
            if (res.code === 0) {
              return res.data
            } else {
              this.$message.error(res.msg)
              return {
                list: []
              }
            }
          })
      }
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    openAddComp () {
      this.showChild = true
      this.openType = 0
    },
    handleReset () {
      this.queryParam = {}
      this.$refs.table.refresh(true)
    },
    async addDep (obj) {
      console.log('obj', obj)
      // 新增部门
      obj.superior_dep_id = obj.superior_dep_id === '' ? '0' : obj.superior_dep_id
      const addDepData = await addDepartment(obj)
      console.log(addDepData)
      if (addDepData.code === 0) {
        this.$message.success(addDepData.data)
        this.$refs.table.refresh(true)
        this.$store.dispatch('setDepartments')
      } else {
        obj.superior_dep_id = obj.superior_dep_id === '0' ? '' : obj.superior_dep_id
        this.$message.error(addDepData.msg)
      }
    },
    async changeNew (data) {
      /* eslint-disable */
      const { depname, superior_dep_id, company_id } = data
      const changeData = { depname, superior_dep_id, company_id }
      changeData.superior_dep_id = changeData.superior_dep_id === '' ? '0' : changeData.superior_dep_id
      const changeMsg = await changeDep(data.id, changeData)
      /* eslint-disable */
      if (changeMsg.code === 0) {
        this.$message.success(changeMsg.data)
        this.$refs.table.refresh()
        this.$store.dispatch('setDepartments')
      } else {
        this.$message.warning(changeMsg.msg)
      }
    },
    editDep (value) {
      this.openType = 1
      this.formData = value
      this.showChild = true
    },
    del (id) {
      let _this = this
      this.$confirm({
        title: '确定删除该部门么',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          deleteDep(id).then(res => {
            if (res.success) {
              _this.$message.success(res.msg)
              _this.$refs.table.refresh(true)
              _this.$store.dispatch('setDepartments')
            } else {
              _this.$message.warning(res.msg)
            }
          })
        },
        onCancel () {
        }
      })
    }
  }
}
</script>
<style scoped>
.el-table td,
.el-table th {
  text-align: center;
}

.block {
  margin-top: 5px;
}
</style>
